<template>
  <div class="expense-details-board-chart">
    <div class="chart--doughnut">
      <!-- <a-descriptions
        class="line"
        :title="typeStr + localeStr + $t('all.autotext246')"
      >
      </a-descriptions> -->
      <a-descriptions :title="$t('all.autotext1667')"></a-descriptions>
      <ChartDoughnut :data="costApplyChartData" type="count"></ChartDoughnut>
    </div>
    <div class="chart--circle">
      <!-- <a-descriptions
        class="line"
        :title="typeStr + localeStr + $t('all.autotext496')"
      >
      </a-descriptions> -->
      <!-- <ChartCircle ref="typeChart" :data="typeChartData"></ChartCircle> -->
      <a-descriptions :title="$t('all.autotext1668')"></a-descriptions>
      <ChartDoughnut :data="totalForAllChartData" type="totalForAll"></ChartDoughnut>
    </div>
    <!-- <div class="chart--circle" v-if="from!=='high'">
      <a-descriptions
        class="line"
        :title="typeStr + localeStr + $t('all.autotext1507')"
      >
      </a-descriptions>
      <s-table
        ref="table"
        :row-key="record => record.id"
        :show-pagination="false"
        :scroll="{ y: 200 }"
        :columns="tableColumns"
        :data="loadData"
      ></s-table>
    </div> -->
  </div>
</template>

<script>
import { buildPaginationObj } from '@comp/Table'
import ChartDoughnut from '@views/data-board/components/chart-doughnut.vue'
// import ChartCircle from '@views/data-board/components/chart-circle.vue'

export default {
  name: 'expense-details-board-chart',
  components: { ChartDoughnut },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
    from: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      typeChartData: [],
      costApplyChartData: [],
      totalForAllChartData: []
    }
  },
  computed: {
    typeStr () {
      return this.data.typeStr
    },
    localeStr () {
      return this.$i18n.locale === 'en-US' ? ' ' : ''
    }
  },
  watch: {
    'data.detailedData' () {
      this.updateView()
    }
  },
  methods: {
    loadData () {
      const { detailedData } = this.data
      let categoryData = []
      if (detailedData?.categoryMap) {
        categoryData = Object.entries(detailedData.categoryMap).map(([key, value], index) => ({
          id: index,
          type: key,
          amount: value
        }))
      }
      return Promise.resolve(buildPaginationObj(categoryData))
    },
    updateView () {
      // if (this.from !== 'high') {
      //   this.$refs.table.refresh()
      // }
      // this.updateTypeChart()
      this.updateCostApplyChart()
      this.updateTypeChartTotalForAll()
    },
    // 申请比数维度
    updateTypeChart () {
      const { detailedData } = this.data
      this.typeChartData = Object.entries(detailedData.type || {}).map(([key, value]) => ({
        name: key,
        value: value.count || 0,
        totalAmount: value.totalAmountForAll || 0
      }))
    },
    // 申请人数维度
    updateTypeChartTotalForAll () {
      const { detailedData } = this.data
      this.totalForAllChartData = Object.entries(detailedData.pie || {}).map(([key, value]) => ({
        name: key,
        value: value.totalForAll || 0,
        totalAmount: value.totalAmountForAll || 0
      }))
    },
    updateCostApplyChart () {
      const { detailedData } = this.data
      this.costApplyChartData = Object.entries(detailedData.pie || {}).map(([key, value]) => ({
        name: key,
        value: value.count || 0,
        totalAmount: value.totalAmountForAll || 0
      }))
    }
  }
}
</script>

<style scoped lang='less'>
.expense-details-board-chart {
  display: flex;
  .chart--circle,.chart--doughnut {
    height: 300px;
  }
}

</style>
